<template>
    <div>
        <div class="home1">
            <!-- <img class="img1" src="@/assets/logo2.png" /> -->

            <div class="bgadapp">
                <span>{{$t('m.home_title')}}</span>
                <div class="h-txt">
                    <!-- <span>AI数字人和区块链金融生态相结合，会带来怎样的变革呢？</span> -->
                    <span>{{ $t('m.home_title_1') }}</span>
                </div>
            </div>
            <div class="div-bg1">
                <img class="bg1" src="@/assets/bg1.png" />
            </div>

        </div>


        <div class="home">

            <span class="h-txt1">{{ $t('m.home_title_2') }}</span>
            <div class="line"></div>
            <div class="h-txt2">{{ $t('m.home_title_3') }}</div>
            <div class="hh">
                <div class="hh-title">
                    <div class="line2"></div>
                    <div class="hh-txt1">{{ $t('m.home_title_4') }}</div>
                </div>
                <div class="hh-txt2">
                    {{ $t('m.home_title_5') }}
                </div>
            </div>

            <!-- <div class="hh">
                <div class="hh-title">
                    <div class="line2"></div>
                    <div class="hh-txt1">{{ $t('m.home_title_6') }}</div>
                </div>
                <div class="hh-txt2">
                    {{ $t('m.home_title_7') }}
                </div>
            </div> -->


            <span class="h-txt1">{{ $t('m.home_list') }}</span>

            <div class="h-txt2">{{ $t('m.home_list_1') }}</div>


            <div class="hh">
                <div class="hh-title">

                    <div class="hh-txt1">{{ $t('m.home_list_2') }}</div>
                </div>
                <div class="hh-txt2  gj">
                    {{ $t('m.home_list_3') }}
                </div>
                <img class="bg2" src="@/assets/szrgj.png" />
            </div>

            <div class="hh">
                <div class="hh-title">

                    <div class="hh-txt1">{{ $t('m.home_list_4') }}</div>
                </div>
                <div class="hh-txt2">
                    {{ $t('m.home_list_5') }}
                </div>
                <img class="bg2" src="@/assets/ds.png" />
            </div>

            <div class="hh">
                <div class="hh-title">

                    <div class="hh-txt1">{{ $t('m.home_list_6') }}</div>
                </div>
                <div class="hh-txt2">
                    {{ $t('m.home_list_7') }}
                </div>
                <img class="bg2" src="@/assets/szrzj.png" />
            </div>


            <div class="hh">
                <div class="hh-title">

                    <div class="hh-txt1">{{ $t('m.home_list_8') }}</div>
                </div>
                <div class="hh-txt2">
                    {{ $t('m.home_list_9') }}
                </div>
                <img class="bg2" src="@/assets/szrnz.png" />
            </div>

            <div class="bg3-div">
                <img class="bg3" src="@/assets/bg5.png" />
                <div class="hh-end">
                    <div class="hh-txt3"></div>
                    <div>
                        {{ $t('m.home_list_11') }}
                    </div>
                </div>
            </div>

            <div class="foot">
                <div>
                    <img class="foot-logo" src="@/assets/logo.png" />
                </div>
                <div class="foot2">
                    <img class="foot-logo2" src="@/assets/g1.png" />
                    <img class="foot-logo2" src="@/assets/g3.png" @click="goUrl('https://twitter.com/ADAPP245596?s=09')" />
                </div>
            </div>

            <div class="foot3">
                {{ $t('m.home_list_12') }}
            </div>
        </div>

    </div>
</template>
  
<script>
// @ is an alias to /src

import i18n from '@/i18n';
import { Notify } from 'vant';
export default {
    name: 'HomeCopy',
    data() {
        return {
            isZh: true
        };
    },
    created() {

        if (i18n.locale == 'zh') {
            this.$store.state.isZh = true
        } else {
            this.$store.state.isZh = false
        }
    },
    methods: {
        goUrl(url){
            window.open(url, '_blank') 
        },
        goNav() {
            this.$router.push('/nav')
        },
        goWeb() {
            window.open("https://app.uniswap.org/", '_self')
        },
        goPrice() {
            window.open("https://m.ave.ai/token/0x787c17e7f05837e3ad85922a4343078079899a95-arbitrum", '_self')
        },
        clickPledge() {
            this.$router.push('/pledge/15')
        },
        share() {
            if (this.$store.state.address == '') {
                Notify(this.$t('m.no_connect'))
                return false
            }
            var element = this.createElement(this.$store.state.url + this.$store.state.address);
            element.select();
            element.setSelectionRange(0, element.value.length);
            document.execCommand('copy');
            element.remove();
            Notify({ type: 'success', message: this.$t("m.share_copy") });
        },
        //创建临时的输入框元素
        createElement(text) {
            var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
            var element = document.createElement('textarea');
            // 防止在ios中产生缩放效果
            element.style.fontSize = '12pt';
            // 重置盒模型
            element.style.border = '0';
            element.style.padding = '0';
            element.style.margin = '0';
            // 将元素移到屏幕外
            element.style.position = 'absolute';
            element.style[isRTL ? 'right' : 'left'] = '-9999px';
            // 移动元素到页面底部
            let yPosition = window.pageYOffset || document.documentElement.scrollTop;
            element.style.top = `${yPosition}px`;
            //设置元素只读
            element.setAttribute('readonly', '');
            element.value = text;
            document.body.appendChild(element);
            return element;
        }
    }

}
</script>
<style scoped>
.home1 {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    justify-content: center;
    align-items: center;
    max-width: 550px;
    margin: auto;
}

.bgadapp {
    margin-bottom: 10px;
    background-image: url('~@/assets/ADAPP.png');
    width: 100%;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    align-items: center;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    flex-direction: column;



}

.bgadapp span {
    font-size: 16px;
    color: #000000;
    padding: 0 25px;

}

.img1 {
    width: 270px;
    height: 85px;
    margin: 38px 0 20px 0;
}

.h-txt {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.h-txt span {
    color: #999999;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
}

.bg1 {
    height: auto;
    width: 100%;

}

.div-bg1 {
    background-color: #F7F7F7;
    width: 100%;
}

.home {
    padding: 0 25px;
    max-width: 500px;
    margin: auto;
    margin-top: 30px;

}

.h-txt1 {
    color: #000000;

}

.line {
    width: 25px;
    height: 5px;
    background-color: #1DD0C1;
    margin-top: -7px;
}

.h-txt2 {
    color: #666666;
    font-size: 12px;
    margin: 15px 0;
    line-height: 20px;
}

.hh {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.hh-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}

.line2 {
    width: 4px;
    height: 11px;
    background-color: #1DD0C1;
    margin-right: 3px;
}

.hh-txt2 {
    color: #666666;
    font-size: 12px;
    line-height: 20px;
}

.bg2 {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.bg3 {

    width: 100%;
    height: auto;
}

.bg3-div {
    position: relative;
}

.hh-end {
    position: absolute;
    left: 25px;
    top: 30px;
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
    font-size: 16px;
    padding-right: 20px;
    line-height: 25px;
}

.hh-txt3 {
    margin-bottom: 20px;
}

.foot-logo {
    width: 60px;
    height: auto;
}

.foot {
    margin-top: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foot2 {

    display: flex;
    align-items: center;

}

.foot-logo2 {
    width: 20px;
    height: auto;
    margin-left: 10px;
}

.foot3 {
    color: #666666;
    padding-bottom: 40px;
    font-size: 6px;
    padding-left: 5px;
}

.gj {
    display: flex;
    flex-direction: column;
}</style>
  
  